<template>
  <view class="content">
    <!-- 自定义导航 ===================================================== -->
    <smt-nav-bar title="自定义导航"></smt-nav-bar>
    <!-- 自定义导航 ===================================================== -->

    <!-- tabs 组件 ===================================================== -->
    <view class="title">tabs组件</view>

    <view class="component">
      <text class="label">类型切换: </text>
      <switch
        :checked="pills"
        @change="pills = !pills"
        :color="cameTheme.themeColor"
      />

      <text class="label">线对其方式: </text>
      <switch
        :checked="lineItems"
        @change="lineItems = !lineItems"
        :color="cameTheme.themeColor"
      />
    </view>
    <smt-tabs
      class="component"
      v-model="current.pill"
      :tabs="tabs"
      :pills="pills"
      paddingItemX="132"
      pillsMarginX="16"
      :lineItems="lineItems"
      index="1"
    ></smt-tabs>
    <view>
      <smt-tabs
        class="component"
        v-model="current.line"
        :tabs="tabsLine"
        :pills="!pills"
        paddingItemX="30"
        pillsMarginX="0"
        :lineItems="lineItems"
        index="2"
      ></smt-tabs>
    </view>
    <!-- tabs 组件 ===================================================== -->

    <!-- 弹出层组件 ===================================================== -->
    <view class="title" @click="popupOpen">时间选择组件</view>
    <smt-datatime-picker
      ref="smtDataTimePicker"
      v-model="dataTime"
      type="datetime"
    ></smt-datatime-picker>
    <!-- 弹出层组件 ===================================================== -->

    <!-- 轮播图组件 ===================================================== -->
    <view class="title">轮播图组件</view>
    <wk-swiper class="wk-swiper-test"></wk-swiper>
    <!-- 轮播图组件 ===================================================== -->

    <!-- 标签组件 ===================================================== -->
    <view class="title">标签组件</view>
    <smt-tag text="特色美食"></smt-tag>
    <!-- 标签组件 ===================================================== -->

    <!-- 分类导航 ===================================================== -->
    <view class="title">分类导航</view>
    <view class="navigation">
      <wk-navigation></wk-navigation>
    </view>
    <!-- 分类导航 ===================================================== -->

    <!-- 悬浮按钮 ===================================================== -->
    <pub-fab></pub-fab>
    <!-- 悬浮按钮 ===================================================== -->
  </view>
</template>

<script>
import { mapState } from "vuex";
import WkSwiper from "@/components/wk-swiper/index.vue";
import WkNavigation from "@/pages/index/components/wk-navigation.vue";

export default {
  components: { WkSwiper, WkNavigation },
  data() {
    return {
      current: {
        pill: 0,
        line: 0,
      },
      tabs: ["周三 4/27", "周四 4/28", "周四 4/28", "周四 4/28"],
      tabsLine: [
        "早餐",
        "早点",
        "午餐",
        "午点",
        "晚餐",
        "早餐",
        "早点",
        "午餐",
        "午点",
        "晚餐",
      ],
      // 胶囊模式
      pills: true,
      // 线对其方式
      lineItems: true,
      dataTime: "",
    };
  },
  computed: {
    ...mapState("setting", ["cameTheme"]),
  },
  methods: {
    popupOpen() {
      this.$refs.smtDataTimePicker.show();
    },
  },
};
</script>

<style lang="scss" scoped>
.margin-left {
  margin-left: 10rpx;
}
.component {
  margin: 10px 0;
}
.title {
  font-size: $smt-font-size-18;
  color: $smt-theme-color;
  padding-top: 10rpx;
  font-weight: bold;
  @extend .margin-left;
}
.label {
  font-size: $smt-font-size-14;
  @extend .margin-left;
}
.popup-content {
  height: 300px;
  background-color: #fff;
}
.navigation {
  height: 1000rpx;
}
.wk-swiper-test {
  height: 420rpx;
}
</style>
